<template>
  <div class="seconds-box">
    <div id="kill">
    <span>嗨购秒杀</span>
    <span class="ten">八点场
       <van-count-down :time="time" class="times">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
    </span>
    <span id="fire">爆款<span class="arrow"></span></span>
  </div>
  <br>
  <ul >
    <li  v-for="goods in goodslist" :key="goods.proid" @click="goGoodsDetail(goods.proid)">
      <img :src="goods.img1">
      <p class="price">￥{{goods.originprice}}</p>
    </li>
   
  </ul>
  </div>
</template>

<script>
// import axios from "axios"
export default {
name:"SecondsKill",
data(){
  return {
   time:10800000,
    goodslist:[],
    
  }
},
methods:{
   goGoodsDetail(id){
      this.$router.push("/GoodsDetail/"+id);
    }
},
created(){
    this.$server({
      // url:"http://localhost:3000/goods",
      method: 'get', 
      url: 'http://121.89.205.189:3001/api/pro/seckilllist', 
      params: { 
             count:1, 
             limitNum: 10
            } 
      
    })
    .then(res=>{
      this.goodslist=res.data.data;
    })
},

}
</script>

<style scoped>
.times{
  width: 9.375rem;
  float: right;
  
}
#kill{
  width: 100%;
  margin-top:7px;
  display: flex;
  justify-content: space-around;
 
}

.colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 18px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
    border-radius: 10px;
  }
  .ten{
  color: red;
  font-size: 14px;
  margin-left: 10px;
}
ul{
width: 100%;
display: flex;
flex-wrap: nowrap;
overflow: auto;
}
ul>li{
  width: 60px;
  height: 60px;
  /* border: 1px solid gray; */
  margin-left:5px;
  
  
}
ul>li img{
   width: 100%;
  height: 40px;

}
.price{
  color: red;
  font-size:12px
}
</style>